<template>
    <div id="building">
        <div class="login-container">
        <el-form :model="ruleForm2" :rules="rules2"
         status-icon
         ref="ruleForm2" 
         label-position="left" 
         label-width="70px"
         class="demo-ruleForm login-page">
            <h3 class="title" style="color:white;">系统登录</h3>
            <el-form-item prop="username" label="用户名">
                <el-input type="text" 
                    v-model="ruleForm2.username" 
                    auto-complete="off" 
                    placeholder="用户名"
                ></el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码">
                    <el-input type="password" 
                        v-model="ruleForm2.password" 
                        auto-complete="off" 
                        placeholder="密码"
                    ></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
                <el-input v-model="ruleForm2.code" style="width:142px;float:left" maxlength="5"></el-input>
                <el-image :src="captchaImg" class="captchaImg" @click="getCaptcha"></el-image>
            </el-form-item>
            <el-checkbox
                v-model="checked"
                class="rememberme"
            >记住密码</el-checkbox>
            <router-link to="/regision" style="margin-left:200px">账号注册</router-link>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
    </div>
</template>

<script>
import axios from '../utils/request'
import qs from 'qs'
export default {
    data(){
        return {
            logining: false,
            ruleForm2: {
                username: 'admin',
                password: 'admin',
                code:'',
                token:''
            },
            rules2: {
                username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                password: [{required: true, message: '密码不能为空', trigger: 'blur'}],
                code:[
                    { required: true, message: '请输入验证码', trigger: 'blur' },
					{ min: 5, max: 5, message: '长度为 5 个字符', trigger: 'blur' }
                ]
            },
            checked: false,
            captchaImg:null,
            imgSrc:require('../assets/backgroud.png')
        }
    },
    methods: {
        handleSubmit(){
            var self = this;
            self.$refs.ruleForm2.validate((valid) => {
                if(valid){
                    axios({
                        url:'/login?'+qs.stringify(this.ruleForm2),
                        method:'post'
                        })
                    .then(res=>{
                        // 记录jwt（token）凭证
                        const jwt = res.headers['authorization'];
                        this.$store.commit('SET_TOKEN',jwt);
                        this.$router.push({path: '/'});
                    })
                }else{
                    return false;
                }
            })
        },
        // 获取图片验证码
        getCaptcha(){
            axios.get('/captcha').then(res=>{
                // console.log(res)
                this.captchaImg = res.data.data.base64Img;
                this.ruleForm2.token = res.data.data.key;
                this.ruleForm2.code = '';
            })
        }
    },
    created(){
        this.getCaptcha();
    }
};
</script>

<style scoped>
.login-container {
    /* width: 100%;
    height: 100%; */
    position: absolute;
    left: 12%;
    top: 0.1%;
}
.login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px;
    background: rgba(7, 7, 7, 0);
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
label.el-checkbox.rememberme {
    margin: 0px 0px 15px;
    text-align: left;
}

.captchaImg{
    width:120px;
    height:40px;
    float:right;
    margin-left: 2px;
    border-radius: 5px;
}
#building{
    background:url("../assets/backgroud.png");
    width:100%;		
    height:100%;
    position:fixed;
    background-size:100% 100%;
}

</style>